<template>
    <el-row class="hg100 row">
        <el-row>
            <el-col>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>实践任务</el-breadcrumb-item>
                    <el-breadcrumb-item>{{kcmc}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col class="mt20 user-list">
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" class="box box-tb">
                    <el-checkbox v-for="(item,i) in cities" :label="i" :key="i" class="el-box box box-tb"
                        :disabled="item.disabled" @change="handleChange">
                        <div class="list box box-pack-between box-align-center">
                            <div class="box box-pack-start box-align-center">
                                <el-image src="/static/image/fm1.png" class="img"></el-image>
                                <div class="ml20 box box-tb box-pack-center box-align-start">
                                    <h3>敬老院打扫志愿服务</h3>
                                    <span class="tips mt20">学生完成度</span>
                                    <div class="progress box box-pack-start box-align-center" v-if="item.disabled == true">
                                        <div class="box box-align-center">
                                          <el-slider :disabled="true" class="start-time" v-model="item.complete"
                                              :max="item.total"></el-slider>
                                          <div class="percent">
                                              <span>{{item.complete}}</span>
                                              <span>/</span>
                                              <span>{{item.total}}</span>
                                          </div>
                                          <div class="detail cp" @click.stop="detail(item,i)">详情</div>
                                        </div>

                                    </div>
                                </div>

                            </div>
                            <div class="box box-tb box-pack-around right">
                                <div class="tab mr20">
                                    生产劳动
                                </div>
                                <div class="icon" v-if="item.disabled == false">
                                    未发布
                                </div>
                            </div>
                        </div>
                    </el-checkbox>
                </el-checkbox-group>
            </el-col>
            <el-col class="tl mt30 check">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
                    {{`已选${checkedCities.length}`}}
                </el-checkbox>
                <span class="pub-btn">发布任务</span>
            </el-col>
        </el-row>

        <detail-view :dialogVisible="show" @clickClose="clickClose()" @updateList="getData()" ref="child"></detail-view>
    </el-row>
</template>

<script>
    import detailView from './components/detail.vue';
    import Jsondata from '@/json/check.json'
    export default {
        components: {
            detailView
        },
        data() {
            return {
                // kcmc:this.$route.query.kcmc 需要上页传值
                kcmc: '社会劳动课程',
                tabList: [{
                        title: "课程详情"
                    },
                    {
                        title: "章节目录"
                    }
                ],
                current: 0,
                checkedCities: [],
                cities: Jsondata,
                isIndeterminate: true,
                checkAll: false,
                show: false
            };
        },
        mounted() {

        },
        methods: {
            changeTab(i) {
                this.current = i
            },
            clickEdit() {
                this.$router.push({
                    path: "/ldkc_jyzz/bjkc_jyzz"
                })
            },
            clickClose() {
                this.show = false
            },
            //全选
            handleCheckAllChange(val) {
                // Json.forEach((res)=>{if(res.disbled != false) {return res}})
                // this.checkedCities = val ? Json.map((res)=>{if(res.disbled != false) {return res}}) : [];
                Jsondata.map((item, i) => {
                    if (item.disabled != true) {
                        // console.log(i);
                        return i
                    }
                })

                this.checkedCities = val ? Jsondata.map((item, i) => {
                    if (item.disabled != true) {
                        return i
                    }
                }).filter(res => {
                    return res != undefined
                }) : [];
                this.isIndeterminate = false;
                // console.log(this.checkedCities);
            },
            //触发方法
            handleCheckedCitiesChange(value) {
                console.log(`${value.length}  value`);
                let len = Jsondata.map((item, i) => {
                    if (item.disabled != true) {
                        return i
                    }
                }).filter(res => {
                    return res != undefined
                }).length;
                let checkedCount = value.length;
                this.checkAll = checkedCount === len;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkedCities.length;
            },
            detail(item, i) {
                this.show = true
                // this.$nextTick(()=>{
                //     this.checkedCities = []
                // })
            },
            handleChange(e) {
                // console.log(this.checkedCities);
            },
            getData() {}
        }
    };
</script>

<style scoped lang="scss">
    .bgf {
        background-color: #fff;
    }

    .left {
        padding: 10px 0;
        width: 340px;
        background-color: #fff;

        .img {
            width: 218px;
            height: 120px;
            border-radius: 7px;
        }

        .bold {
            font-size: 18px;
        }

        .name {
            padding-left: 20px;
            width: 120px;

            .edit {
                width: 76px;
                height: 26px;
                background: #FEF8F2;
                border: 1px solid #FF9B4F;
                border-radius: 13px;
                color: #FF9B4F;
                line-height: 26px;
                cursor: pointer;
            }
        }
    }

    .right {
        padding-right: 20px;

        .cbs {
            margin-top: 20px;
            width: 140px;
            height: 24px;
            line-height: 24px;
            background: #F3F4FB;
            border-radius: 12px;
            color: #939FF4;
        }

        .zb {
            color: #2F3142;
            font-weight: 600;
        }
        .tab {
            width: 88px;
            height: 20px;
            background: #F3F4FB;
            color: #939FF4;
            border-radius: 10px;
        }
        .icon {
            color: #939FF4;
        }
    }

    .bgf>>>.el-divider--horizontal {
        margin: 0 20px;
        width: auto;
    }

    .row {
        box-sizing: border-box;
    }

    .hg100 {
        height: 100%;
    }

    .shi {
        position: absolute;
        top: 251px;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        overflow-y: auto;
    }

    .pub-btn {
        display: inline-block;
        width: 102px;
        height: 42px;
        line-height: 42px;
        background: #FF9B4F;
        border-radius: 11px;
        text-align: center;
        color: #fff;

        &:hover {
            cursor: pointer;
            box-shadow: 1px 4px 7px 0px rgba(255, 155, 79, 0.4);
        }
    }

    .list {
        margin: 10px 0;
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
        height: 110px;
        background: #FFFFFF;
        border: 1px solid #fff;
        border-radius: 7px;

        .img {
            width: 110px;
            height: 91px;
        }

        .progress {
            height: 100%;
        }
        h3 {
            font-size: 18px;
        }

        .percent {
            width: 100px;
        }
        .tips {
            color: #888F9E;
        }

        .right {
            height: 100%;

            // width: 200px;


        }
    }

    .detail {
        width: 5px;
    }

    .user-list>>>.el-checkbox {
        position: relative;
        box-sizing: border-box;
        padding-left: 20px;
        width: 100% !important;
        margin-right: 0;
        display: flex;
        justify-content: center;

        &.is-checked .list {
            border: 1px solid #626BF1;
        }
    }

    .user-list>>>.el-checkbox__input {
        position: absolute;
        // top: 50%;
        left: 0;
        margin-top: -40px;
        padding-top: 40px;
    }

    .user-list>>>.el-checkbox__label {
        .list {
            display: flex;
            color: #000000;
        }
    }

    .user-list>>>.el-checkbox__input {
        display: flex;
        align-items: center;
    }

    .user-list>>>.el-checkbox__input.is-checked .el-checkbox__inner,
    .check>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner,
    .check>>>.el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #626BF1;
        border-color: #626BF1;
    }

    .check>>>.el-checkbox__input.is-checked+.el-checkbox__label {
        color: #000000;
    }

    .user-list>>>.el-checkbox__inner:hover {
        border-color: #626BF1;
    }

    .user-list>>>.el-checkbox__input.is-focus,
    .check>>>.el-checkbox__input.is-focus {
        border-color: #626BF1;

        .el-checkbox__inner {
            border-color: #626BF1;
        }
    }

    .user-list>>>.el-checkbox__input.is-disabled+span.el-checkbox__label {
        cursor: default;
    }
    // 进度条
    .start-time {
        width: 150px;
    }
    .start-time>>>.el-slider__runway {
        margin: 0;

        .el-slider__bar {
            // background-color: #fded00;
            background: linear-gradient(-7deg, #626BF1, #989BFA);
        }

        .el-slider__button-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .el-slider__button {
            display: inline-block;
            border: none;
            height: 15px;
            width: 15px;
            background: linear-gradient(-7deg, #626BF1, #989BFA);
        }
    }

    .start-time>>>.el-slider__runway.disabled .el-slider__button-wrapper:hover,
    .start-time>>>.el-slider__runway.disabled .el-slider__button:hover {
        cursor: default;
    }
</style>
